<template>
	<!-- @touchstart="touchStart" @touchend="touchEnd" -->
	<view class="authentication" >
		<view class="au_header">
			Personal Information
		</view>
		<view class="au_flow">
			<view class="flow_texts">
				<text class="flow_text active">Basic Info</text>
				<text class="flow_text">Work Info</text>
				<text class="flow_text">Bank Info</text>
			</view>
			<!-- 流程线 -->
			<view class="flow_lines">
				<view class="flow_line">

				</view>
				<view class="flow_Cirline">

				</view>
			</view>
			<!-- from表单提交 -->
			<u--form :model="auth" :rules="rules" ref="uForm">
				<!-- 出生年月 -->
				<u-form-item prop="auth1_year" @click="show = true" ref="item1" border>
					<u--input v-model="auth.year" disabled disabledColor="#ffffff" placeholder="Please choose"
						border="surround" suffixIcon="arrow-down" color="#D53030"
						placeholderStyle="color:#D53030"></u--input>
					<u-datetime-picker cancelText="Close" confirmText="Sure" :show="show" v-model="value2" mode="date"
						@confirm="confirm" @cancel="show = false" :minDate="min" :maxDate="max"></u-datetime-picker>
					<span class="i_Birthday">Birthday</span>
				</u-form-item>
				<!-- 性别 -->
				<u-form-item prop="auth1_Female" ref="item1" @click="showSex = true" border>
					<u--input v-model="auth.sex" disabled disabledColor="#ffffff" placeholder="Please choose"
						border="surround" suffixIcon="arrow-down" color="#D53030"
						placeholderStyle="color:#D53030"></u--input>
					<span class="i_sex">Gender</span>
					<u-action-sheet :show="showSex" :actions="sex_actions" title="Please choose"
						@close="showSex = false" @select="sexSelect">
					</u-action-sheet>

				</u-form-item>
				<!-- 是否结婚 -->
				<u-form-item prop="auth1_Married" ref="item1" @click="showMarried = true" border>
					<u--input v-model="auth.married" disabled disabledColor="#ffffff" placeholder="Please choose"
						border="surround" suffixIcon="arrow-down" color="#D53030"
						placeholderStyle="color:#D53030"></u--input>
					<span class="i_sex">Married</span>
					<u-action-sheet :show="showMarried" :actions="Married_actions" title="Please choose"
						@close="showMarried = false" @select="MarriedSelect">
					</u-action-sheet>

				</u-form-item>
				<!-- 用户名称 -->
				<u-form-item prop="auth1_FullName" ref="item1" border>
					<u--input v-model="auth.fullName" disabledColor="#ffffff" placeholder="Please enter"
						border="surround" color="#D53030" placeholderStyle="color:#D53030"></u--input>
					<span class="i_sex">FullName</span>
				</u-form-item>
				<!-- 邮箱-->
				<u-form-item prop="auth1_Email" ref="item1" border>
					<u--input v-model="auth.email" disabledColor="#ffffff" placeholder="Please enter" border="surround"
						color="#D53030" placeholderStyle="color:#D53030"></u--input>
					<span class="i_sex">Email</span>
				</u-form-item>

				<button class="from_next" @click="submit">NEXT</button>

			</u--form>
			<!-- <u-modal showCancelButton buttonReverse :show="shows" confirmText="Agree" closeOnClickOverlay
				cancelText="Do not use" @close="shows=false" cancelColor="#8C8D8E" @confirm="next" @cancel="close"
				:content="content"></u-modal> -->
		</view>
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="returns">
				<image class="pop-img" src="../../static/pop.png" mode=""></image>
				<view class="pop-tit">
					Tips
				</view>
				<view class="pop-text" style="margin-top: 25rpx;">
					You have not finished yet.
				</view>
				<view class="pop-text">
					Are you sure you want to quit?
				</view>
				<view class="pop-btn">
					<button @click="quit" class="quit">Quit</button>
					<button @click="closepop" class="closes">Close</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import configService from '@/common/service/config.service.js';
	import {
		getRawKey,
		getEncryptString,
		getDecryptString
	} from "../../defaut.js"
	import $_storage from '../../common/util/storage'
	export default {
		data() {
			return {
				auth: {
					year: "",
					sex: "",
					married: "",
					fullName: "",
					email: ""
				},
				shape: '', //round 圆形
				loading: false,
				userName: 'admin',
				password: 'universa',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				encoded: '',
				code: '',
				min: 0,
				max: Number(new Date()),
				rules: {
					"auth1.year": {
						type: "string",
						require: true,
						message: "Please select the corresponding date",
						trigger: ['blur', 'change']
					},
					"auth1_Female": {
						type: "string",
						require: true,
						message: "Please select gender",
						trigger: ['blur', 'change']
					},
					"auth1_FullName": {
						type: "string",
						require: true,
						message: "Please enter your username",
						trigger: ['blur', 'change']
					},
					"auth1_Married": {
						type: "string",
						require: true,
						message: "Please select married status",
						trigger: ['blur', 'change']
					},
					"auth1_Email": {
						type: "string",
						require: true,
						message: "Please enter the correct email address",
						trigger: ['blur', 'change']
					}

				},
				value2: Number(new Date()),
				show: false,
				showSex: false,
				showMarried: false,
				shows: false,
				content: "You have't finished yet. Are you sure you want to quit?",
				sex_actions: [{
						name: 'Female',
					},
					{
						name: 'Male',
					}
				],
				Married_actions: [{
						name: 'Unmarried',
					},
					{
						name: 'Married',
					}, {
						name: 'Divorce',
					},
				],
				// 刚触碰的时间
				startTime: 0,
				// 刚触碰的位置
				startPosition: 0,
				// 结束的位置
				endPosition: 0,
				moves: 0, // 最大值为100
				appwidth: null,
				nativePlug:null, //打点
			}
		},
		onLoad() {
			console.log(uni.getStorageSync('phone') == uni.getStorageSync('usernumber'))
			console.log(uni.getStorageSync('phone'))
			console.log(uni.getStorageSync('usernumber'))
			if(uni.getStorageSync('one') && uni.getStorageSync('phone') == uni.getStorageSync('usernumber')){
				let arr= uni.getStorageSync('one')
				this.auth.year=arr.year,
				this.auth.sex=arr.sex,
				this.auth.married=arr.married,
				this.auth.fullName=arr.fullName,
				this.auth.email=arr.email
			}
			
		},
		methods: {
			confirm(value) {
				this.showWorkingSince = false
				var date = new Date(value.value);
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份从0开始，需要加1
				var day = date.getDate();
				var formattedDate = year + '-' + month + '-' + day;
				this.auth.year = formattedDate
				this.show = false
			},
			sexSelect(e) {
				this.auth.sex = e.name

				// this.$refs.uForm.validateField('auth1_Female')
			},
			MarriedSelect(e) {
				this.auth.married = e.name
				// this.$refs.uForm.validateField("auth1_Married")
			},
			checkEmail(email) {
				return RegExp(
						/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)
					.test(
						email);
			},
			submit() {
				// this.$refs.uForm.validate().then(res => {
				// 				uni.$u.toast('校验通过')
				// 			}).catch(errors => {
				// 				uni.$u.toast('校验失败')
				// 			})
				if (!this.auth.year) {
					uni.showToast({
						title: 'Incomplete information',
						icon: 'none',
						duration: 2000,
					});
					return;
				} else if (!this.auth.sex) {
					uni.showToast({
						title: 'Incomplete information',
						icon: 'none',
						duration: 2000,
					});
					return;
				} else if (!this.auth.married) {
					uni.showToast({
						title: 'Incomplete information',
						icon: 'none',
						duration: 2000,
					});
					return;
				} else if (!this.auth.fullName) {
					uni.showToast({
						title: 'Incomplete information',
						icon: 'none',
						duration: 2000,
					});
					return;
				} else if (!this.auth.email) {
					uni.showToast({
						title: 'Please enter the correct email address',
						icon: 'none',
						duration: 2000,
					});
					return;
				} else if (!this.checkEmail(this.auth.email)) {
					uni.showToast({
						title: 'Please enter the correct email address',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				const one={
					year:this.auth.year,
					sex:this.auth.sex,
					married:this.auth.married,
					fullName:this.auth.fullName,
					email:this.auth.email
				}
				uni.removeStorageSync("twos");
				 uni.removeStorageSync("three");
				const usernumber=uni.getStorageSync('phone')
				uni.setStorageSync('one',one)
				uni.setStorageSync('usernumber',usernumber)
				
				const data = {
					infoAuthStatus: 3, //uni.getStorageSync('infoAuthStatus')
					brithday: this.auth.year,
					gender: this.auth.sex,
					married: this.auth.married,
					fullName: this.auth.fullName,
					email: this.auth.email
				};

				const paramsString = JSON.stringify(data);
				this.encoded = getEncryptString(paramsString, this.$password())
				// console.log(this.encoded);
				this.$http.post("user/v1/save", '', {
					params: {
						login: this.encoded
					}
				}).then(res => {
					if (res.data.status == 200) {
						$_storage.setStorage('authentication_1', data)
						getDecryptString(res.data.data, this.$password())
						uni.setStorageSync('types', 3)
						// 打点
						if(!uni.getStorageSync('dadian3')){
							this.nativePlug = uni.requireNativePlugin("FbKochava")
							if(this.nativePlug != null){
								this.nativePlug.eventTracking("start_applying","tel",uni.getStorageSync("phone"))
							}
							uni.setStorageSync('dadian3','1')
						}
						
						
						uni.reLaunch({
							url: "/pages/authentication/authenticationtwo"
						})
					}
				})
				// console.log(this.auth);
				// this.shows = true
			},
			next() {
				uni.reLaunch({
					url: "/pages/authentication/authenticationtwo"
				})
			},
			close() {
				uni.navigateBack(1)
			},
			// ************新增的代码*****************
			// 打开上一级弹窗
			// 关闭返回上一级弹窗
			openpop() {
				this.$refs.popup.open('center')
			},
			closepop() {
				this.$refs.popup.close()
			},
			// 返回上一阶段页面
			quit() {
				// uni.navigateTo({
				// 	url: "/pages/home/home"
				// })
				uni.reLaunch({
					url: "/pages/home/home"
				})
			},
			// 触摸
			touchStart(event) {
				// 获取初始时间
				this.startTime = Date.now()
				// 获取初始的位置
				this.startPosition = event.changedTouches[0].clientX
			},
			touchEnd(event) {
				const endTime = Date.now()
				if (endTime - this.startTime > 2000) {
					// 如果手指滑动的距离超过2s 就默认不合法
					return;
				}
				// 判断其滑动的距离是否值得触发，给定一个10 的距离
				if (Math.abs(this.endPosition - this.startPosition) > 15) {
					this.endPosition = event.changedTouches[0].clientX
					var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
				} else {
					return;
				}
				if (elePosition == 'right') {
					this.openpop()
				}
			},

		},
		onBackPress(e) {
			 this.openpop()
			return true
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.authentication {
		width: 100%;
		padding-bottom: 40rpx;
		background-color: #FFFFFF;
	}

	// header头部
	.au_header {
		background-color: rgba(213, 48, 48, 1);
		padding-top: 96rpx;
		padding-bottom: 32rpx;
		text-align: center;
		font-size: 40rpx;
		font-family: SourceHanSansSC-Regular, SourceHanSansSC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 58rpx;
		letter-spacing: 2rpx;
	}

	// 流程
	.authentication .au_flow {
		margin-left: 28rpx;
		margin-right: 26rpx;
		margin-top: 56rpx;
	}

	.au_flow .flow_texts {
		display: flex;
		justify-content: space-around;
		margin-bottom: 42rpx;
	}

	.au_flow .flow_texts .flow_text {
		font-size: 26rpx;
		font-family: SourceHanSansSC-Medium, SourceHanSansSC;
		font-weight: 600;
		color: rgba(213, 48, 48, 0.5);
		line-height: 38rpx;
	}

	.au_flow .flow_texts .flow_text.active {
		font-size: 26rpx;
		font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
		font-weight: 600;
		color: #D53030;
		line-height: 38rpx;
	}

	// 流程线
	.flow_lines {
		height: 14rpx;
		border-radius: 12rpx;
		border: 2rpx solid #D53030;
		position: relative;
		margin-bottom: 90rpx;
	}

	.flow_lines .flow_line {
		height: 14rpx;
		background: #D53030;
		border-radius: 12rpx;
		width: 232rpx;
	}

	.flow_Cirline {
		width: 30rpx;
		height: 30rpx;
		background: #FFFFFF;
		border: 2rpx solid #D53030;
		border-radius: 50%;
		position: absolute;
		top: 0;
		transform: translateY(-31%);
		left: 102rpx;
	}

	// 认证一的from表单
	.u-popup {
		flex: 0 !important;
	}

	.u-form .u-form-item {
		position: relative !important;
		margin-bottom: 58rpx;
	}

	.u-form /deep/ .u-form-item .u-input {
		padding: 0 54rpx 0 0 !important;

	}

	.u-form /deep/ .u-form-item .u-form-item__body {
		padding: 0 0 !important;
	}

	.u-form /deep/ .u-form-item .u-input .u-input__content {
		height: 112rpx !important;
		font-size: 32rpx !important;
		font-family: "SourceHanSansSC-Medium", "SourceHanSansSC " !important;
		font-weight: 500 !important;
		color: #D53030 !important;
		line-height: 48rpx !important;
		padding-left: 52rpx;
	}

	.i_Birthday,
	.i_sex {
		position: absolute;
		font-size: 24rpx;
		font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6);
		line-height: 32rpx;
		background-color: #fff;
		left: 56rpx;
		top: -13px;
		transform: translateY(25%);
		padding: 0 10rpx;

	}

	.from_next {
		width: 100%;
		height: 86rpx;
		border-radius: 46rpx;
		border: 4rpx solid #D53030;
		line-height: 86rpx;
		font-size: 28rpx;
		font-family: "SourceHanSansSC-Medium", "SourceHanSansSC";
		font-weight: 500;
		color: #D53030;
	}


	.returns {
		width: 100% !important;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 45rpx;

		.pop-img {
			width: 260rpx;
			height: 200rpx;
			margin: 15rpx auto 35rpx;
			display: block;
		}

		.pop-tit {
			text-align: center;
			color: #333;
			font-size: 34rpx;
			font-weight: bold;
		}

		.pop-text {
			text-align: center;
			font-size: 24rpx;
			color: #999;
			line-height: 24rpx;
			margin-top: 10rpx;
		}

		.pop-btn {
			width: 100%;
			display: flex;
			align-items: center;
			column-gap: 50rpx;
			margin-top: 50rpx;

			.quit {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #4787FD;
				font-size: 30rpx;
			}

			.closes {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eee;
				font-size: 30rpx;
			}
		}

	}
</style>